<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>评论</title>
		<style>
			
			#comment{
				border: 1px solid seagreen;
				width:900px ;
				height: 150px;
			}
			#line{
				width: 880px;
				border: 1px solid seagreen;
				margin: 0 auto;
				margin-top: 10px;
				
			}
			#pages{
				width: 900px;
				margin-top: 10px;
			}
			#pages a{ /* 加外边框 内边距 */
			border: 1px solid #ddd;
			padding:4px 10px;
			border-radius: 5px;
			margin-right: 5px;
			}
			#pages a.current{
				border:0;
				text-decoration: none;
				color: #000;
			}
			
			div#comment i{
				display: block;
				width: 75px;
				height: 16px;
				border: 1px solid transparent;
				pad ding:0px 30px;
				background-image: url(img/星星.jpg);
				bac kground-size: 560%;
				background-position:-139px -238px;
				
				
			}
			
		</style>
		
		
	</head>
	<body>
		<div id="comment">
			<!-- 精灵图：将小图标导出成一张矢量图【png】 好处：图片名称不用起 服务器压力小 -->
			<i></i>
			
			<div id="line">
			</div>
		</div>
		<div id="pages">
		<a href="#" class="current">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#">6</a>
		</div>
		
	</body>
</html>